<template>
    <view class="content">
        <HM-dragSorts feedbackGeneratorState :list="list" :isLongTouch="true" :rowHeight="55" @change="change" @confirm="confirm" @onclick="onclick">
            <template slot="rowContent" slot-scope="{ row }">
                <view class="row">  
                    <image v-if="row.icon" class="icon" mode="widthFix" :src="row.icon"></image>
                    <text class="text">{{row.name}}</text>
                </view>
            </template>
        </HM-dragSorts> 
    </view>
</template>


 <script>
	 import dragSorts from '@/components/HM-dragSorts/HM-dragSorts.vue' // 组件符合easycom规范，默认这个可以不写
	 export default {
	     components: {dragSorts},// 组件符合easycom规范，默认这个可以不写
	     data() {
	         return {
	             list:[
	                 {"name": "花呗", "icon": "/static/images/my/hb.png"},
					 {"name": "银联","icon": "/static/images/my/icon-bank.png"},
	                 {"name": "余额宝","icon": "/static/images/my/yeb.png"},
					 {"name": "微信支付","icon": "/static/images/my/icon-wechat2.png"},
	                 {"name": "账户余额","icon": "/static/images/my/zjye.png"},
	                 {"name": "中国建设银行信用卡(4401)","icon": "/static/images/my/ccb.png"},
	                 {"name": "工商储蓄卡(7223)","icon": "/static/images/my/icbc.png"},
					 
	             ]
	         }
	     },
	     methods: {  
	         onclick(e){
				 uni.showToast({
				 	title:e.value.name,
					icon:'none'
				 })
	             console.log('=== onclick start ===');
	             console.log("被点击行: " + JSON.stringify(e.value));
	             console.log("被点击下标: " + JSON.stringify(e.index));
	             console.log('=== onclick end ===');
	         },
	         change(e){
	             console.log('=== change start ===');
	             console.log("被拖动行: " + JSON.stringify(e.moveRow));
	             console.log('原始下标：',e.index);
	             console.log('移动到：',e.moveTo);
	             console.log('=== change end ===');
	         },
	         confirm(e){
	             console.log('=== confirm start ===');
	             console.log("被拖动行: " + JSON.stringify(e.moveRow));
	             console.log('原始下标：',e.index);
	             console.log('移动到：',e.moveTo);
	             console.log('=== confirm end ===');
	         }
	     }
	 }
 </script>
 
 
 <style lang="scss" scoped>
     //scoped css只在当前页生效 不影响子组件
     page {background-color: #efeff4;}
     @media (prefers-color-scheme: dark){page {background-color: #000000;} }
     .content {
		 .row{
			 display: flex;
			 flex-direction: row;
			 align-items: center;
			.icon{width: 30px;border-radius: 6px;margin-right: 13px;}
				.text{font-size: 13px;}}}
 </style>  